<template>
  <div class="app-container">
    <!-- 表格 -->
    <vxe-grid ref="xGridDom" v-bind="xGridOpt">
      <!-- 左侧按钮列表 -->
      <template #toolbar-btns>
        <vxe-button status="primary" icon="vxe-icon-add" @click="toGenerateLicenseRoute(0)">创建license</vxe-button>
      </template>

      <!--      展开行的内容-->
      <template #expand-content="{ row }">
        <div>
          <el-card>
            <el-descriptions>
              <el-descriptions-item v-for="item in licenseDescribe" :label="item.label">
                <el-tag v-if="row[item.key] !== ''">{{ row[item.key] }}</el-tag>
                <el-tag v-else>N/A</el-tag>
              </el-descriptions-item>
            </el-descriptions>

            <el-descriptions title="集成组件黑名单">
              <el-descriptions-item>
                <span v-if="row.studioCompBlackList !== ''" class="tooltip-content">
                  {{ row.studioCompBlackList }}
                </span>
                <el-tag v-else>N/A</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
          <!--          权限设置 -->
          <Permission :licenseVersion="row.licenseVersion" :readonly="true" :propCheckList="row.checkList"/>
        </div>
      </template>

      <!--      状态-->
      <template #row-status="{ row }">
        <div>
          <el-tag v-if="row.active === 1">生效中</el-tag>
          <el-tag v-else type="danger">已作废</el-tag>
        </div>
      </template>

      <!-- 操作 -->
      <template #row-operate="{ row }">
        <el-tooltip class="box-item" effect="dark" content="复制license" placement="top-end">
          <el-button
            icon="DocumentCopy"
            type="primary"
            size="small"
            text
            v-clipboard="row.license"
            @click="ElMessage.success('已复制到剪贴板')"
          />
        </el-tooltip>
        <el-divider direction="vertical" />
        <el-tooltip class="box-item" effect="dark" content="下载license" placement="top-end">
          <el-button link icon="Download" type="primary" @click="downloadLic(row.license)"/>
        </el-tooltip>
        <el-divider direction="vertical" />
        <el-tooltip class="box-item" effect="dark" content="重新生成" placement="top-end">
          <el-button link icon="Edit" type="primary" @click="toGenerateLicenseRoute(row.id)"/>
        </el-tooltip>
        <el-divider direction="vertical" />
        <el-tooltip class="box-item" effect="dark" content="删除" placement="top-end">
          <el-button link icon="Delete" type="danger" @click="crudStore.onDelete(row)"/>
        </el-tooltip>
      </template>
    </vxe-grid>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue"
import {type ElMessageBoxOptions, ElMessageBox, ElMessage} from "element-plus"
import DaysColumnSolts from "./tsx/DaysColumnSolts"
import {formatDate, formatDateTime, trimValue} from "@/utils/index"
import Permission from "../components/permissionSetting/index.vue"

import {type VxeGridInstance, type VxeGridProps, type VxeGridPropTypes} from "vxe-table"

import {useRouter} from "vue-router"
import {deleteLicenseApi, getLicenseApi, GetLicenseResponseData, RowMeta} from "@/api/license/license"

defineOptions({
  name: "License"
})

// 展开的license详情
const licenseDescribe = [
  {label: "管理平台API数", key: "managerApis"},
  {label: "管理平台用户数", key: "managerUsers"},
  {label: "管理平台项目数", key: "managerProjects"},
  {label: "管理平台集成平台限制", key: "managerIntegrations"},
  {label: "管理平台支持组织数", key: "managerOrganizations"},
  {label: "管理平台测试限制", key: "managerTests"},
  {label: "管理平台发布限制", key: "managerProducts"},
  {label: "集成平台用户数", key: "studioUsers"},
  {label: "公司显示名", key: "compDisplayName"},
  {label: "管理平台版本", key: "coreApiVersion"},
  {label: "编排平台版本", key: "runtimeVersion"},
  {label: "配置中心版本", key: "cfgVersion"},
]

const router = useRouter()
const toGenerateLicenseRoute = (id: number) => {
  router.push({
    path: `/license/generate/${id}`,
  })
}

const downloadLic = (lic: string) => {
  const blob = new Blob([lic], { type: "text/plain" });
  const url = window.URL.createObjectURL(blob);

  // 创建一个下载链接
  const a = document.createElement("a");
  a.href = url;
  a.download = "lic.txt"; // 设置下载的文件名
  a.style.display = "none";
  // 将下载链接添加到页面
  document.body.appendChild(a);
  // 模拟点击下载链接
  a.click();
  // 释放对象URL资源
  window.URL.revokeObjectURL(url);
  // 移除下载链接
  document.body.removeChild(a);
}

//#region vxe-grid
const xGridDom = ref<VxeGridInstance>()
const xGridOpt: VxeGridProps = reactive({
  /** 展开行 */
  expandConfig: {
    iconColumnIndex: 0, // 展开图标所在的列索引
    expandAll: false, // 是否默认展开所有行
    expandRowKeys: [], // 默认展开的行的 key
    accordion: false // 是否每次只能展开一行
  },
  loading: true,
  autoResize: true,
  /** 分页配置项 */
  pagerConfig: {
    align: "right"
  },
  /** 表单配置项 */
  formConfig: {
    items: [
      {
        field: "name",
        itemRender: {
          name: "$input",
          props: {placeholder: "客户名称", clearable: true}
        }
      },
      {
        field: "active",
        itemRender: {
          name: "$select",
          props: {placeholder: "请选择license状态", clearable: true},
          options: [
            {label: "生效中", value: 1},
            {label: "已作废", value: 2}
          ]
        }
      },
      {
        itemRender: {
          name: "$buttons",
          children: [
            {
              props: {type: "submit", content: "搜索", status: "primary"}
            }
          ]
        }
      }
    ]
  },
  /** 工具栏配置 */
  toolbarConfig: {
    refresh: true,
    custom: false,
    slots: {buttons: "toolbar-btns"}
  },
  /** 列配置 */
  columns: [
    {
      type: "expand", // 设置列类型为展开列
      width: 40, // 设置展开列的宽度
      slots: {content: "expand-content"}
    },
    {
      field: "id",
      title: "ID",
      width: "100px"
    },
    {
      field: "customerName",
      title: "客户名称"
    },
    {
      field: "env",
      title: "ENV"
    },
    {
      field: "version",
      title: "版本"
    },
    {
      field: "expiredDate",
      title: "过期日期",
      formatter: (params) => {
        return formatDate(params.row.expiredDate)
      }
    },
    {
      field: "expiredDate",
      title: "剩余天数",
      sortable: true,
      slots: DaysColumnSolts
    },
    {
      field: "active",
      title: "状态",
      slots: {default: "row-status"}
    },
    {
      field: "createdAt",
      sortable: true,
      title: "创建时间",
      formatter: (params) => {
        return formatDateTime(params.row.createdAt)
      }
    },
    {
      title: "操作",
      width: "250px",
      fixed: "right",
      showOverflow: false,
      slots: {default: "row-operate"}
    }
  ],
  /** 数据代理配置项（基于 Promise API） */
  proxyConfig: {
    /** 启用动态序号代理 */
    seq: true,
    /** 是否代理表单 */
    form: true,
    /** 是否自动加载，默认为 true */
    // autoLoad: false,
    props: {
      total: "total"
    },
    ajax: {
      query: ({page, form}: VxeGridPropTypes.ProxyAjaxQueryParams) => {
        xGridOpt.loading = true
        crudStore.clearTable()
        return new Promise<any>((resolve: Function) => {
          let total = 0
          let result: RowMeta[] = []
          /** 加载数据 */
          const callback = (res: GetLicenseResponseData) => {
            if (res && res.data) {
              const resData = res.data
              // 总数
              if (Number.isInteger(resData.total)) {
                total = resData.total
              }
              // 分页数据
              if (Array.isArray(resData.list)) {
                result = resData.list
              }
            }
            xGridOpt.loading = false
            resolve({total, result})
          }

          /** 接口需要的参数 */
          const params = {
            name: trimValue(form.name),
            active: form.active || undefined,
            size: page.pageSize,
            currentPage: page.currentPage
          }
          /** 调用接口 */
          getLicenseApi(params).then(callback).catch(callback)
        })
      }
    }
  }
})
//#endregion

//#region CRUD
const crudStore = reactive({
  /** 表单类型：修改：true 新增：false */
  isUpdate: true,
  /** 加载表格数据 */
  commitQuery: () => xGridDom.value?.commitProxy("query"),
  /** 清空表格数据 */
  clearTable: () => xGridDom.value?.reloadData([]),
  /** 删除 */
  onDelete: (row: RowMeta) => {
    const tip = `确定 <strong style="color:red;">删除 </strong>客户 <strong style="color:#409eff;">${row.customerName}</strong> <strong style="color:#409eff;">${row.env}的license</strong>信息？`
    const config: ElMessageBoxOptions = {
      type: "warning",
      showClose: true,
      closeOnClickModal: true,
      closeOnPressEscape: true,
      cancelButtonText: "取消",
      confirmButtonText: "确定",
      dangerouslyUseHTMLString: true
    }
    ElMessageBox.confirm(tip, "提示", config)
      .then(() => {
        deleteLicenseApi(row.id)
          .then(() => {
            ElMessage.success("删除成功")
            crudStore.afterDelete()
            crudStore.commitQuery()
          })
          .catch(() => 1)
      })
      .catch(() => 1)
  },

  /** 删除后是否返回上一页 */
  afterDelete: () => {
    const tableData: RowMeta[] = xGridDom.value!.getData()
    const pager: VxeGridPropTypes.ProxyAjaxQueryPageParams | undefined = xGridDom.value?.getProxyInfo()?.pager
    if (pager && pager.currentPage > 1 && tableData.length === 1) {
      --pager.currentPage
    }
  }
})
//#endregion
</script>

<style lang="scss" scoped>
.expand-wrapper {
  padding: 10px;
}

.tooltip-content {
  white-space: pre-wrap; /* 或者使用 pre-line */
  word-break: break-all; /* 根据需要使用 word-break 属性 */
}

.tooltip-base-box {
  width: 600px;
}
</style>
